<template>
  <el-dialog v-if="previewDialog" class="preview-dialog" width="1200px" :visible.sync="previewDialog" :title="datas.old_name">
    <div class="dialog-main" style="display:flex;justify-content:center;align-items:center;min-height:200px;background: #666;">
      <pdf-object v-if="previewData.types=='.pdf'&&isSupportPdf" :urls="previewData.url" />
      <image-preview v-if="previewData.types=='.png'||previewData.types=='.jpg'||previewData.types=='.jpeg'" :currentimg="previewData.url" />
    </div>
  </el-dialog>
</template>

<script>
    import { dataFlow } from '@/api/upload'
    import { blobType } from '@/utils/file'
    import PDFObject from 'pdfobject'

    export default {
        name: "pdfAndPngDialog",
        components: {
            ImagePreview: () => import('../../../components/ImagePreview/index.vue'),
            pdfObject: () => import('../../../components/pdfObject/index.vue')
        },
        data:function () {
            return{
                datas:{},
                previewDialog:false,
                isSupportPdf: true,
                previewData: {
                    url: '',
                    name: '',
                    types: ''
                },
            }
        },
        methods:{
            openDialog:function(item){
                this.datas = item;
                this.getDataFlow(this.datas)
            },
            getDataFlow(itemData) {
                // window.open(process.env.VUE_APP_FILE_API + '/fileInfo/read?id=' + id)
                const suffix = itemData.suffix.toLowerCase()
                if (suffix === '.jpg' || suffix === '.jpeg' || suffix === '.png' || suffix === '.mp3' || suffix === '.wav' || suffix === '.pdf') {
                    const blobtype = blobType(itemData)
                    // pdf判断浏览器是否支持
                    if (suffix === '.pdf' && PDFObject.supportsPDFs) {
                        this.isSupportPdf = true
                    } else {
                        this.isSupportPdf = false
                    }
                    dataFlow({ id: itemData.id }).then(res => {
                        const src = window.URL.createObjectURL(new Blob([res], {
                            type: blobtype
                        })) // 这里也是关键,调用window的这个方法URL方法
                        this.previewData.url = src
                        this.previewData.types = itemData.suffix
                        this.previewDialog = true
                    }).catch((err) => {
                        this.$message({
                            type: 'error',
                            message: err
                        })
                    })
                } else {
                    this.$message({
                        type: 'warning',
                        message: '暂不支持在线预览'
                    })
                }
            },
        }
    }
</script>

<style scoped>

</style>
